<template>
  <div>
    <div class="header">
      <a href="#" class="logo">
        <img class="logo-img" src="./../../assets/img/logo.png" alt="图标">
        <span class="logo-title">人在回路机器学习</span>
      </a>
      <el-dropdown class="dropdown" @command="handleCommand">
        <span class="el-dropdown-link">
          {{user.username}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="update">修改密码</el-dropdown-item>
          <el-dropdown-item command="exit">退出系统</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
     <!-- 修改密码对话框 -->
    <!-- <el-dialog
      title="修改密码"
      :visible.sync="updatePasswordDialogVisible"
      width="50%">
      <el-form :model="passwordForm" status-icon :rules="passwordFormRules" ref="passwordFormRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="原密码" prop="oldPass">
          <el-input clearable type="password" v-model="passwordForm.oldPass"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPass">
          <el-input clearable type="password" v-model="passwordForm.newPass"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input clearable type="password" v-model="passwordForm.checkPass"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('passwordFormRef')">提交</el-button>
          <el-button @click="resetForm('passwordFormRef')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog> -->
  </div>
</template>
<script>
export default {
  data () {
    // 自定义校验框
    // var validatePass = (rule, value, callback) => {
    //   passwordApi.checkPass(this.user.id, value).then(response => {
    //     if (response.data.flag) {
    //       callback()
    //     } else {
    //       callback(new Error('密码不正确'))
    //     }
    //   })
    // }
    // var validateCheckPass = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请再次输入密码'))
    //   } else if (value !== this.passwordForm.newPass) {
    //     callback(new Error('两次输入密码不一致!'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      // 用户名
      user: JSON.parse(localStorage.getItem('user'))
      // updatePasswordDialogVisible: false,
      // // 密码框
      // passwordForm: {
      //   oldPass: '',
      //   newPass: '',
      //   checkPass: ''
      // },
      // passwordFormRules: {
      //   oldPass: [
      //     { required: true, message: '旧密码不能为空', trigger: 'blur' },
      //     { validator: validatePass, trigger: 'blur' }
      //   ],
      //   newPass: [{ required: true, message: '新密码不能为空', trigger: 'blur' }],
      //   checkPass: [
      //     { required: true, message: '确认密码不能为空', trigger: 'blur' },
      //     { validator: validateCheckPass, trigger: 'change' }
      //   ]
      // }
    }
  },
  methods: {
    // 点击下拉菜单触发事件
    handleCommand (command) {
      // console.log(this.user)
      // 这里也可以使用switch
      if (command === 'exit') {
        // 退出系统
        this.handleExit()
      } else {
        // this.handleUpdatePass()
      }
    },
    // // 退出系统
    handleExit () {
      // 1, 获取系统的token
      // const token = JSON.parse(localStorage.getItem('token'))
      localStorage.removeItem('token')
      localStorage.removeItem('user')
      this.$router.push('/login')
    }
  }
}
</script>
<style scoped>
  .logo{
    text-decoration: none
  }
  .logo-img{
    width: 25px;
    height: 25px;
    vertical-align:middle;
    padding: 0 10px 0 40px
  }
  .logo-title{
    color: white;
  }
  .dropdown{
    cursor: pointer;
    float: right;
    margin-right: 20px;
    color: white
  }
</style>
